<template>
  <div v-show="pages.totalPages > 1" class="text-center">
    <ul class="pagination">
      <li v-if=" current > 0 "><a href="javascript:;" @click="toPage(current - 1)">&laquo;</a></li>
      <li :class=" {'active': current === 0} ">
        <a href="javascript:;" @click="toPage(0)">1</a>
      </li>
      <li v-if=" current > 4 && pages.totalPages > 4*2+1 ">
        <a href="javascript:;" class="disabled">...</a>
      </li>
      <template v-for="n in pages.totalPages">
        <template v-if="n > 0 &&
                        n < pages.totalPages - 1 &&
                        (
                          Math.abs(n - current) < 4 ||
                          current <= 4 && n < 4*2 ||
                          current >= pages.totalPages-1-4 && n > pages.totalPages-1-4*2
                        ) ">
          <li :class=" {'active': current === n} ">
            <a href="javascript:;" @click="toPage(n)">{{n + 1}}</a>
          </li>
        </template>
      </template>
      <li v-if="current < pages.totalPages-1-4 && pages.totalPages > 4*2+1">
        <a href="javascript:;" class="disabled">...</a>
      </li>
      <li v-if="pages.totalPages > 1" :class=" {'active': current === pages.totalPages - 1} ">
        <a href="javascript:;" @click="toPage(pages.totalPages - 1)">{{pages.totalPages}}</a>
      </li>
      <li v-if=" current < pages.totalPages - 1 "><a href="javascript:;" @click="toPage(current + 1)">&raquo;</a></li>
    </ul>
  </div>
</template>
<style src="./pages.css" scoped></style>
<script src="./pages.js"></script>